import React, { Component } from 'react'
import { Flex, WingBlank, WhiteSpace, Toast } from 'antd-mobile-v2'
import { Link } from 'react-router-dom'
import { API } from '../../utils/api'
import NavHeader from '../../components/Headnavbar'
import styles from './index.module.css'
//导入功能函数：路由切换、获取当前位置
import withHook from "../../utils/Withhook"
// 导入处理表单的  withFormik
import { withFormik, Form, Field, ErrorMessage } from 'formik'
// 导入yup
import * as Yup from 'yup'

// 验证规则：(正则表达式)
//大小写、数字、下划线  5~8位
const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/
//大小写、数字、下划线  5~12位
const REG_PWD = /^[a-zA-Z_\d]{5,12}$/

class Login extends Component {
  render() {
    return (
      <div className={styles.root}>
        {/* 顶部导航 */}
        <NavHeader className={styles.navHeader} title="账号登录"></NavHeader>
        <WhiteSpace size="xl" />
        {/* 登录表单 */}
        <WingBlank>
          <Form>
            {/* 账号文本框 */}
            <div className={styles.formItem}>
              <Field
                className={styles.input}
                name="username"
                placeholder="请输入账号"
              />
            </div>
            {/* 长度为5到8位，只能出现数字、字母、下划线 */}
            <ErrorMessage
              className={styles.error}
              name="username"
              component="div"
            />
            {/* 密码文本框 */}
            <div className={styles.formItem}>
              <Field
                className={styles.input}
                name="password"
                type="password"
                placeholder="请输入密码"
              />
            </div>

            <ErrorMessage
              className={styles.error}
              name="password"
              component="div"
            />
            <div className={styles.formSubmit}>
              <button className={styles.submit} type="submit">
                登 录
              </button>
            </div>
          </Form>
          {/* 进入注册页面 */}
          <Flex className={styles.backHome}>
            <Flex.Item>
              <Link to="/registe">还没有账号，去注册~</Link>
            </Flex.Item>
          </Flex>
        </WingBlank>
      </div>
    )
  }
}


// 用withFormik 包裹起来--所有的配置都在props里面有
const HookLogin =withFormik({
  //  配置
  mapPropsToValues: () => ({ username: '', password: '' }), //相当于state 提供初始数据 return 只有一个对象,简写 用()包裹起来
  // validate 表单验证
  // validationSchema 验证配合yup 常用
  validationSchema: Yup.object().shape({
    // 名：验证规则  .matches(正则,错误的提示文字)  长度为5到8位 数字字母下划线
    username: Yup.string().required('请输入用户名！！').matches(REG_UNAME,'用户名要求5-8位'),
    password: Yup.string().required('请输入密码！！').matches(REG_PWD,'密码必须5-12位')
  }),
  //表单的提交事件，props指向被包装组件
  handleSubmit: async (values, { props }) => {
    // 获取用户名密码 发送ajax去登录
    let { username, password } = values
    // 先判断用户名密码是否符合格式.... 验证成功才去发送ajax
    // 发送 
    let res = await API.post(`/user/login`,{username,password})
    
    if (res.data.status === 200) {
      //登录成功 顺便存token
      Toast.success("登录成功", 2)
      localStorage.setItem("my_token", res.data.body.token)//登录信息存在在mytorken
      props.to(-1)//使用withhook的to
    } else {
      Toast.fail("登录失败", 2)
    }
  }
})(Login);

export default withHook(HookLogin)





